<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{position: relative;}
        .box .imgbox{float: left;padding: 10px;}
        .box img{width:200px;display: block;padding: 10px;border: solid 1px black;border-radius: 6px;}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/0.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/0.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/0.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
    </div>
</body>
<script>

    // 分析：瀑布流，第一行浮动，其他行的每个元素定位，计算位置

    // 获取元素
    // 获取浏览器宽度
    // 计算一行最多放n个
    // 0~n第一行：获取所有高度，作为初始列高
    // n~length-1其他行：
        // 定位
        // 获取最小列高作为top
        // 获取最小列高的索引 * 任意一个宽度，作为left
        // 改变当前列高为，原列高+当前元素高度

    // 设计：
    // class WaterFull{
    //     constructor(){
    //         // 获取元素
    //         // 获取浏览器宽度
    //         // 计算一行最多放n个
    //         this.getmaxNum();
    //     }
    //     getmaxNum(){
    //         // 计算一行最多放n个
    //         // 第一行
    //         this.firstLine()
    //         // 其他行
    //         this.otherLine()
    //     }
    //     firstLine(){
    //         // 获取所有高度，作为初始列高s
    //     }
    //     otherLine(){
    //         // 定位
    //         // 获取最小列高作为top
    //         // 获取最小列高的索引 * 任意一个宽度，作为left
    //         // 改变当前列高为，原列高+当前元素高度
    //     }
    // }


    // 编程
    class WaterFull{
        constructor(){
            // 获取元素
            this.imgs = document.querySelectorAll(".box .imgbox")
            // 获取浏览器宽度
            this.clientW = document.documentElement.clientWidth;
            
            // 计算一行最多放n个
            this.getMaxNum();
        }
        getMaxNum(){
            // 计算一行最多放n个
            this.maxNum = parseInt(this.clientW / this.imgs[0].offsetWidth);
            // 第一行
            this.firstLine()
            // 其他行
            this.otherLine()
        }
        firstLine(){
            this.heightArr = [];
            // 获取所有高度，作为初始列高
            for(let i=0;i<this.maxNum;i++){
                this.heightArr.push(this.imgs[i].offsetHeight);
            }
        }
        otherLine(){
            for(let i=this.maxNum;i<this.imgs.length;i++){
                // 定位
                this.imgs[i].style.position = "absolute";
                // 获取最小列高作为top
                const min = Math.min(...this.heightArr);
                this.imgs[i].style.top = min + "px";
                // const min = Math.min.apply(null, this.heightArr)
                // const min = this.heightArr.slice(0).sort((a,b)=>a-b)[0];
                // 获取最小列高的索引 * 任意一个宽度，作为left
                const minIndex = this.heightArr.indexOf(min);
                this.imgs[i].style.left = minIndex * this.imgs[0].offsetWidth + "px";
                // 改变当前列高为，原列高+当前元素高度
                this.heightArr[minIndex] += this.imgs[i].offsetHeight;
            }
        }
    }

    onload = function(){
        // 因为页面上用到了大量的图片，获取图片资源的高度，所以要在浏览器加载完成后执行
        new WaterFull();
    }


</script>
</html>